<script></script>
<template>
  <!-- 就业保障服务模块 -->
  <div class="serve w">
    <ul>
      <li>
        <a href="#">
          <i class="iconfont icon-fuwu" ></i>
          <p>保障服务</p>
        </a>
        <a href="#">
            <i class="iconfont icon-wodetuangou" ></i>
            <p>企业团购</p>
        </a>
        <a href="#">
            <i class="iconfont icon-shouhou" ></i>
            <p>F码通道</p>
        </a>
        <a href="#">
            <i class="iconfont icon-huafei" ></i>
            <p>米粉卡</p>
        </a>
        <a href="#">
            <i class="iconfont icon-xin" ></i>
            <p>以旧换新</p>
        </a>
        <a href="#">
            <i class="iconfont icon-SDqia" ></i>
            <p>话费充值</p>
        </a>
      </li>
      <li>
        <img src="../upload/serve-01.jpg" alt="">
      </li>
      <li>
        <img src="../upload/serve-01.jpg" alt="">
      </li>
      <li>
        <img src="../upload/serve-01.jpg" alt="">
      </li>
    </ul>
  </div>
</template>
<style>
/* 就业服务模块 */
.serve {
  margin-top: 14px;
  height: 190px;
  padding-bottom: 20px;
}
.serve ul li {
  float: left;
  width: 316px;
  height: 170px;
  margin-left: 14px;
  transition: all .1s linear;
}
.serve ul li:nth-child(1) {
  width: 234px;
  margin-left: 0;
  background-color: #5f5750;
}
.serve ul li:nth-child(1) a {
  float: left;
  width: 76px;
  height: 82px;
  border: 1px solid #655d56; 
  border-bottom: 0;
  border-right: 0;
  border-radius: 4px;
  margin-left: 2px; 
  margin-bottom: 2px; 
  text-align: center;
  padding-top: 20px;
  color: #b8b5b2;
}
.serve ul li:nth-child(1) a p {
  margin-top: 5px;
  font-size: 12px;
}
.serve ul li:nth-child(n + 2):hover {
  box-shadow: 0 8px 10px 1px #ececec;
}  
.serve ul li img {
  width: 100%;
}
</style>